<template>
	<view class="ccontainer cflex_items">
		<view class="block cflex cflex_row cflex_items">
			<image :src="good.images" mode=""></image>
			<view class="cflex cflex_col">
				<view class="goodName">{{good.name}}</view>
				<view class="length">共{{list.length}}个问题</view>
			</view>
		</view>
		
		<view v-if="list.length == 0" class="nolist cflex cflex_col cflex_items">
			<image src="/static/clq-image/ask-nolist.png"></image>
			<view>暂无提问</view>
		</view>
		<block v-else v-for="(item,index) in list" :key="index">
			<view class="item cflex cflex_col" @click="turnDetail" :data-id="item.ask_id">
				<view class="cflex cflex_row cflex_items">
					<image src="/static/clq-image/ask-icon.png" mode=""></image>
					<view class="ask">{{item.content}}</view>
				</view>
				<block v-for="(item2,index2) in item.answer.list" :key="index2">
					<view class="cflex cflex_row cflex_items">
						<image src="/static/clq-image/answer-icon.png" mode=""></image>
						<view class="answer cflex cflex_col">
							<view><span>{{item2.name}}:</span>{{item2.content}}</view>
							<view class="answer-length cflex cflex_row cflex_items">全部{{item.answer.list.length}}个回答<image src="/static/clq-image/evaluateMore.png"></image>
							</view>
						</view>
					</view>
				</block>
			</view>
		</block>
		<view class="nomore flex flex_row flex_center" v-if="!isMore">{{ getmore }}</view>
		<view class="nomore flex flex_row flex_center" v-if="isMore">{{ nomore }}</view>
		<view style="height: 101rpx;"></view>
		<view class="bottom cflex cflex_row cflex_between cflex_items" :style="{bottom: inputOffsetBottom + 'rpx'}">
			<input type="text" v-model="content" @blur="inputText" placeholder="请输入您的问题" :adjust-position="false" confirm-type="send"/>
			<view class="add cflex cflex_row cflex_center cflex_items" @click="addContent">提问</view>
		</view>
	</view>
</template>

<script>
	import {
		ajax
	} from '../../ajax.js';
	export default {
		data() {
			return {
				inputOffsetBottom:'',
				id: '',
				firstNum: 1,
				num: 10,
				isLoading: true, //是否可滚动
				isMore: true, //是否有数据
				nomore: '',
				getmore: '',
				good: {},
				list: [],
				content: '',
			}
		},
		onReady() {
			let that = this
			// 监听键盘高度变化，以便设置输入框的高度
			uni.onKeyboardHeightChange(res => {
				that.inputOffsetBottom = res.height ? res.height *2+22: 0;
				console.log('that.inputOffsetBottom', that.inputOffsetBottom)
				if (res.height === 0) {
					this.focus = false;
				}
			});
		},
		onLoad: function(opt) {
			let that = this
			// that.id = opt.id
			that.id = 48
			console.log('ask', that.id)
			that.getList()
		},
		methods: {
			turnDetail(e){
				let id = e.currentTarget.dataset.id
				uni.navigateTo({
					url:"/pages/answerList/answerList?id=" +id +'&length=' + that.list.length
				})
			},
			inputText(e){
				let that = this
				that.content = e.detail.value
			},
			addContent() {
				let that = this
				// uni.showLoading({
				// 	title: "加载中"
				// })
				ajax({
					url: 'ask/goodAsk',
					data: {
						token: uni.getStorageSync('token'),
						good_id: that.id,
						content: that.content
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						uni.hideLoading()
						if (res.data.code == 1) {
							uni.showToast({
								title: '发送成功',
								duration: 1500,
								icon: 'none'
							});
							that.getList()
						} else if (res.data.code == 0) {
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						} else if (res.data.code == -1) {
							uni.reLaunch({
								url: '/pages/clq_login/clq_login'
							})
						} else if (res.data.code == -2) {
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						}
					},
					error: function() {
						uni.showToast({
							title: res.data.msg,
							duration: 1500,
							icon: 'none'
						});
					}
				});
			},
			getList() {
				let that = this
				// uni.showLoading({
				// 	title: "加载中"
				// })
				ajax({
					url: 'ask/getAskList',
					data: {
						good_id: that.id,
						firstNum: that.firstNum,
						num: that.num
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						// uni.hideLoading()
						let result = res.data.data
						// console.log('listresult', result);
						if (res.data.code == 1) {
							let list = result.ask
							that.good = result.good
							console.log('good', that.good)
							if (that.firstNum == 1) {
								if (list.length != 0) {
									that.list = list
									// console.log('that.list',that.list)
								}
							} else {
								let listItem = list
								if (listItem.length != 0) {
									that.list = that.list.concat(listItem)
								}
							}
							console.log('that.list', that.list);

							let total = result.total;
							that.last_page = result.last_page;

							if (total == 0) {
								that.isLoading = true; //是否可滚动
								that.isMore = true; //是否有数据
								that.nomore = '暂无相关内容~';
								that.getmore = '';
							} else {
								that.isLoading = false; //是否可滚动
								that.isMore = false; //是否有数据
								that.nomore = '暂无相关内容~';
								that.getmore = '';
							}
							if (that.firstNum < that.last_page) {
								that.isLoading = false; //是否可滚动
								that.isMore = false; //是否有数据
								that.nomore = '没有更多内容了~';
								that.getmore = '';
							} else if ((that.firstNum = that.last_page)) {
								that.isLoading = true; //是否可滚动
								that.isMore = true; //是否有数据
								that.nomore = '没有更多内容了~';
								that.getmore = '';
							} else {
								that.isLoading = true; //是否可滚动
								that.isMore = true; //是否有数据
								that.nomore = '没有更多内容了~';
								that.getmore = '';
							}
						} else if (res.data.code == 0) {
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						} else if (res.data.code == -1) {
							uni.reLaunch({
								url: '/pages/clq_login/clq_login'
							})
						} else if (res.data.code == -2) {
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						}
					},
					error: function() {
						uni.showToast({
							title: res.data.msg,
							duration: 1500,
							icon: 'none'
						});
					}
				});
			},
			onPullDownRefresh() {
				let that = this;
				uni.showLoading({
					title: '努力刷新中',
				})
				that.firstNum = 1
				that.getList()
				// 加载完成后，停止加载
				setTimeout(function() {
					uni.hideNavigationBarLoading() //完成停止加载
					uni.stopPullDownRefresh() //停止下拉刷新
					uni.hideLoading(); //隐藏加载框
				}, 1500);
			},
			onReachBottom() {
				let that = this;
				console.log(111);
				uni.showLoading({
					title: '努力加载中'
				});
				if (that.firstNum < that.last_page) {
					that.firstNum = that.firstNum + 1;
					that.isLoading = false; //是否可滚动
					that.isMore = false; //是否有数据
					that.nomore = '没有更多内容了~';
					that.getmore = '';
					that.getList();
					uni.hideLoading();
				} else if ((that.firstNum = that.last_page)) {
					that.isLoading = true; //是否可滚动
					that.isMore = true; //是否有数据
					that.nomore = '没有更多内容了~';
					that.getmore = '';
					uni.hideLoading();
				} else {
					that.isLoading = true; //是否可滚动
					that.isMore = true; //是否有数据
					that.nomore = '没有更多内容了~';
					that.getmore = '';
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}

	.block {
		width: 673rpx;
		height: 136rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 10rpx 27rpx 14rpx 10rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		margin: 14rpx 0 30rpx 0;
	}

	.block image {
		width: 136rpx;
		height: 136rpx;
		background: #000000;
		border-radius: 12rpx;
		margin-right: 13rpx;
	}

	.goodName {
		width: 500rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.length {
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
		margin-top: 23rpx;
	}

	.item {
		width: 676rpx;
		padding: 25rpx 17rpx 22rpx 17rpx;
		background: #ffffff;
		border-radius: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 24rpx;
	}

	.item image {
		width: 36rpx;
		height: 35rpx;
		margin-right: 31rpx;
	}

	.ask {
		width: 650rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.answer {
		width: 650rpx;
		margin-top: 29rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.answer span {
		font-size: 24rpx;
		font-weight: 500;
		color: #555555;
	}

	.answer-length {
		font-size: 24rpx;
		font-weight: 500;
		color: #ff7427;
		margin-top: 13rpx;
	}

	.answer-length image {
		width: 12rpx;
		height: 20rpx;
		margin-left: 7rpx;
	}

	.bottom {
		width: 100%;
		box-sizing: border-box;
		height: 101rpx;
		background: #ffffff;
		box-shadow: 0px -5rpx 16rpx 8rpx rgba(177, 177, 177, 0.27);
		padding: 0 20rpx 0 29rpx;
		position: fixed;
		bottom: 0;
	}

	.bottom input {
		width: 542rpx;
		height: 56rpx;
		background: #e5e5e5;
		border-radius: 28rpx;
		padding-left: 23rpx;
		font-size: 28rpx;
	}

	.add {
		width: 123rpx;
		height: 56rpx;
		background: #ff7427;
		border-radius: 28rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
	}
	
	.nolist{
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
		margin-top: 200rpx;
	}
	.nolist image{
		width: 316rpx;
		height: 260rpx;
		margin-bottom: 50rpx;
	}
</style>
